$(function () {

    /**
     * 
    页面功能分析:
  0 建议所有的变量都放在代码的最前面 function的前面 
  1 下拉刷新  复杂数据的渲染建议使用模版引擎 
    a 页面初始化 
      1 先构造请求参数 
        a 根据url上的参数 key->proName 产品名称
        b 去查看api文档
    b 点击搜索按钮
      1 获取商品名称
      2 把名称赋值给 全局查询参数对象 QueryObj.proName
      3 手动触发 下拉刷新 
        因为下拉刷新组件里面 已经包含了请求数据的代码 
    c 点击排序的按钮
      1 切换 箭头方向
      2 需要知道点击的是谁 是价格还是数量
      3 根据箭头的方向来判断 是升序还是降序 
      4 手动触发 下拉刷新 
  2 上拉加载下一页
    1 计算总页数 TotalPage
      a 查看返回值 
        count 总条数 pageSize 页容量 
                          6/4=1.5
                 count=6    pageSize   =3   
        总页数 =Math.ceil(count/pageSize)
        TotalPage=Math.ceil(count/pageSize);
    2 拿当前页 QueryObj.page和TotalPage
      a 如果超过了 返回 不执行
      b 不超过-> QueryObj.page++ 然后再发送请求 
  3 点击商品页面跳转
    1 最简单 点击a标签 href属性写上 路径就可以了
    2 在mui中 上拉刷新和下拉加载组件中   a标签的跳转被禁止
    3 因为我们只是在做移动web 不是app 所以还是需要a标签的跳转功能
    4 给a标签绑定一个tap事件
        location.href=a.href;

     */

    /* 定义参数 */
    // 请求参数对象
    var QueryObj = {
        //产品名称
        proName: $.getQueryString("key"),
        // 品牌
        brandId: "",
        // 按照价格排序 1->升序 2->降序
        price: "",
        // 数量排序
        num: "",
        // 第几页
        page: 1,
        // 页容量
        pageSize: 4
    };

    //总页数
    var TotalPage = 1;

    /* 下拉刷新初始化 */
    init();

    function init() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                /* 下拉刷新 */
                down: {
                    height: 50, //可选,默认50.触发下拉刷新拖动距离,
                    auto: true, //可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback: function () {
                        //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                        /* 在触发下拉的时候，把page重新设置为1 */
                        QueryObj.page = 1;

                        /* 发送请求 */
                        queryProduct(function (result) {
                            //渲染模板
                            var html = template("goodsTpl", result);
                            //添加数据
                            $(".lt-goods-ul").html(html);

                            /* 结束下拉刷新 */
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

                            // 重置上啦控件的提示
                            // 重置组件
                            mui('#refreshContainer').pullRefresh().refresh(true);
                        });

                    }
                },

                /* 上拉加载 */
                up: {
                    height: 50, //可选.默认50.触发上拉加载拖动距离
                    auto: true, //可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: function () {
                        //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                        //执行加载下一页
                        //判断当前页有没有超过总页数
                        if (QueryObj.page >= TotalPage) {
                            //不再请求新的数据
                            //给出用户提示信息
                            //是否还有更多数据：若还有更多数据，则传入false；否则传入true，之后滚动条滚动到底是，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                            return;

                        } else {
                            //继续请求新的数据
                            QueryObj.page++;
                            queryProduct(function (result) {
                                //渲染数据 追加到数据的下面
                                var html = template("goodsTpl", result);
                                $(".lt-goods-ul").append(html);
                                // 结束上拉刷新
                                mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                            });
                            
                        }
                    }
                }
            }
        });

        //绑定搜索按钮
        $(".serBtn").on("tap", function () {
            var key = $(".serText").val();
            QueryObj.proName = key;

            //手动触发下拉刷新
            mui("#refreshContainer").pullRefresh().pulldownLoading();
        });

        //点击排序按钮
        $(".ser-filter > a").on("tap", function (e) {
            // console.log(e.target);
            var aDom = e.target.nodeName == "A" ? e.target : e.target.parentNode;
            //获取需要排序的字段
            var sortName = aDom.dataset.sortname;
            // console.log(sortName);

            //切换箭头方向
            //find === 从父元素里面找到里面的子元素
            //toggleClass === 有的话就移除，没有的就添加
            $(aDom).find(".fa").toggleClass("fa-angle-down fa-angle-up");

            //升序还是降序
            var sort = 1;

            //判断升序还是降序
            if ($(aDom).find(".fa").hasClass("fa-angle-down")) {
                //降序
                sort = 2;
            } else {
                //升序
                sort = 1;
            }

            QueryObj.num = '';
            QueryObj.price = '';
            QueryObj[sortName] = sort;

            //手动触发下拉刷新
            mui("#refreshContainer").pullRefresh().pulldownLoading();
        });

    }

    /* 点击购买按钮跳转到购买页面 */
    $("#lt-goods-ul").on("tap", ".pro-buy", function (e) {
    //    console.log(123); 
        var pkey = e.target.parentNode.dataset.id;
        // console.log(a);
    location.href="./product.html?id="+ pkey;
    });


    //请求产品数据
    function queryProduct(callback) {
        $.get("/product/queryProduct", QueryObj, function (result) {
            callback && callback(result);

            //计算总页数
            TotalPage = Math.ceil(result.count / QueryObj.pageSize);
        });
    }
});